import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { TodoService } from '../../../services/todo.service'

@Component({
  selector: 'app-todo-add',
  templateUrl: './todo-add.component.html',
  styleUrls: ['./todo-add.component.less']
})
export class TodoAddComponent implements OnInit {
  @Output() add = new EventEmitter<any>();

  validateForm: FormGroup;

  constructor(private fb: FormBuilder, public ts: TodoService) {
  }

  ngOnInit(): void {
    this.validateForm = this.fb.group({
      title: [null, [Validators.required]],
      message: [null, [Validators.required]],
    });
  }

  submitForm(data): void {
    for (const i in this.validateForm.controls) {
      this.validateForm.controls[i].markAsDirty();
      this.validateForm.controls[i].updateValueAndValidity();
    }
    data.time = new Date().getTime()
    data.isShow = true
    console.log('validateForm', data)
    // this.ts.addTodo(data)
    this.add.emit(data)
    this.validateForm.reset();
  }

  resetForm(e: MouseEvent): void {
    e.preventDefault();
    this.validateForm.reset();
    for (const key in this.validateForm.controls) {
      this.validateForm.controls[key].markAsPristine();
      this.validateForm.controls[key].updateValueAndValidity();
    }
  }

}